<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List</title>
    <style>
        body {
            background: #f5f6fa;
            font-family: 'Segoe UI', 'Arial', sans-serif;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 420px;
            margin: 60px auto 0 auto;
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 4px 24px rgba(0,0,0,0.08);
            padding: 32px 28px 28px 28px;
        }
        .addInput {
            display: flex;
            gap: 12px;
            margin-bottom: 28px;
        }
        .addInput input[type="text"] {
            flex: 1;
            padding: 10px 12px;
            border: 1px solid #dcdde1;
            border-radius: 6px;
            font-size: 16px;
            outline: none;
            transition: border 0.2s;
        }
        .addInput input[type="text"]:focus {
            border: 1.5px solid #4f8cff;
        }
        .addInput input[type="button"] {
            background: #4f8cff;
            color: #fff;
            border: none;
            border-radius: 6px;
            padding: 10px 18px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.2s;
        }
        .addInput input[type="button"]:hover {
            background: #357ae8;
        }
        .todo, .done {
            margin-bottom: 24px;
        }
        .todo p, .done p {
            font-weight: bold;
            font-size: 18px;
            margin: 0 0 12px 0;
            color: #222f3e;
            letter-spacing: 1px;
        }
        .row {
            display: flex;
            align-items: center;
            background: #f1f2f6;
            border-radius: 8px;
            padding: 10px 14px;
            margin-bottom: 10px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.03);
            transition: background 0.2s;
        }
        .row:hover {
            background: #e9ecef;
        }
        .row input[type="checkbox"] {
            margin-right: 14px;
            width: 18px;
            height: 18px;
            accent-color: #4f8cff;
        }
        .row span {
            flex: 1;
            font-size: 16px;
            color: #222f3e;
            word-break: break-all;
        }
        .row input[type="button"] {
            background: #ff6b81;
            color: #fff;
            border: none;
            border-radius: 6px;
            padding: 6px 14px;
            font-size: 14px;
            cursor: pointer;
            margin-left: 10px;
            transition: background 0.2s;
        }
        .row input[type="button"]:hover {
            background: #e55039;
        }
        .done .row span {
            color: #8395a7;
            text-decoration: line-through;
        }
        @media (max-width: 500px) {
            .container {
                padding: 18px 6px 16px 6px;
            }
            .addInput input[type="button"] {
                padding: 10px 8px;
                font-size: 15px;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="addInput">
            <input type="text" name="" id="input" placeholder="请输入待办事项..."> 
            <input type="button" value="新建任务" onclick="addTask()">
        </div>
        <div class="todo">
            <p>未完成</p>
            <!-- <div class="row">
                <input type="checkbox" name="" id="" onclick="addDone.call(this)"> <span>吃饭</span>
                <input type="button" value="删除" onclick="removeTask.call(this)">
            </div> -->
        </div>
        <div class="done">
            <p>已完成</p>
            <!-- <div class="row">
                <span>睡觉</span>
                <input type="button" value="删除" onclick="removeTask.call(this)">
            </div> -->
        </div>
    </div>


    <script>
        // 新建任务
        function addTask() {
            // 获取输入框的值，将其添加到未完成列表中
            let input = document.querySelector('.addInput #input');
            let inputValue = input.value.trim();
            if (inputValue == '') {
                alert('请输入要添加的待办事项!');
                return;
            }
            // 创建 复选框、代办标签、删除按钮
            let checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            // 给复选框添加点击事件
            checkbox.onclick = addDone;
            let span = document.createElement('span');
            span.innerText = inputValue;
            let button = document.createElement('input');
            button.type = 'button';
            button.value = '删除';
            // 给button绑定点击事件
            button.onclick = removeTask;
            // 将三者全部添加到 div 标签中，最终把 div 添加到 todo 列表
            let div = document.createElement('div');
            div.className = 'row';
            div.appendChild(checkbox);
            div.appendChild(span);
            div.appendChild(button);
            let todo = document.querySelector('.todo');
            todo.appendChild(div);
            input.value = '';
        }

        // 删除待办项
        function removeTask() {
            let parent = this.parentElement;
            parent.remove();
        }

        // 点击复选框，将其添加到done中
        function addDone() {
            let parent = this.parentElement;
            // 创建 div、span、删除按钮
            let div = document.createElement('div');
            div.className = 'row';
            let span = document.createElement('span');
            span.innerText = parent.querySelector('span').innerText;
            let button = document.createElement('input');
            button.type = 'button';
            button.value = '删除';
            button.onclick = removeTask;
            div.appendChild(span);
            div.appendChild(button);
            // 添加到done中，并删除旧元素
            let done = document.querySelector('.done');
            done.appendChild(div);
            parent.remove();
        }
    </script>
</body>

</html>